<template>
    <!-- 供应商评价列表 -->
    <div class="e-table billList">
        <div class="top">
            <div class="left" style="margin-left: 10px">
                <el-button
                    style="background: #7aa818; color: #fff"
                    @click="buttonAdd()"
                    >新增评价</el-button
                >
            </div>
            <div class="right">
                <div>
                    <el-input
                        placeholder=""
                        v-model="advancedQuery.keyword"
                        @keyup.enter.native="getData"
                    >
                        <i
                            slot="suffix"
                            class="el-icon-search"
                            style="cursor: pointer"
                            @click="getData"
                        ></i>
                    </el-input>
                </div>
                <div>
                    <el-button
                        style="
                            background: #2e61d7;
                            color: #fff;
                            margin-left: 5px;
                        "
                        @click="onAdvanceSearch"
                        >高级搜索</el-button
                    >
                </div>
            </div>
        </div>
        <el-table
            ref="multipleTable"
            border
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            class="table"
            highlight-current-row
            height="0"
            :header-cell-style="{ textAlign: 'center' }"
            :cell-style="{ textAlign: 'center' }"
            @selection-change="handleSelectionChange"
            @cell-mouse-enter="cellMouseEnter"
            @cell-mouse-leave="cellMouseLeave"
            v-sortTable="{
                tableData: tableData,
                _this: this,
                ref: 'multipleTable'
            }"
        >
            <el-table-column label="供应商名称" fixed="left" min-width="200">
                <template slot-scope="scope">
                    <span
                        @click="Examine(scope.row)"
                        style="color: blue; cursor: pointer"
                    >
                        {{ scope.row.supplierName }}
                    </span>
                </template>
            </el-table-column>
            <el-table-column
                prop="creditCode"
                label="统一社会信用代码"
                width="140"
                fixed="left"
                show-overflow-tooltip
            >
            </el-table-column>

            <el-table-column
                prop="contractName"
                label="合同名称"
                width="250"
                show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
                prop="billDate"
                label="评价日期"
                width="100"
                show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
                prop="orgName"
                label="评价机构"
                width="210"
                show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
                prop="upOrgName"
                label="上级机构"
                width="210"
                show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
                prop="evaluationConclusion"
                label="评价结论"
                min-width="160"
                show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
                prop="state"
                label="状态"
                width="80"
                show-overflow-tooltip
            >
                <template slot-scope="scope">
                    <ToolHistory
                        v-if="scope.row.state === 1"
                        :key="scope.$index"
                        url="/outer/audit/getAuditHistory"
                        :billId="scope.row.id"
                        :billType="6110"
                    >
                        <span v-status="scope.row.state">
                            {{ statusLable(scope.row.state) }}
                        </span>
                    </ToolHistory>
                    <span v-else v-status="scope.row.state">
                        {{ statusLable(scope.row.state) }}
                    </span>
                </template>
            </el-table-column>
        </el-table>
        <div class="bottom">
            <ComPagination
                :total="totalCount"
                :pageSize.sync="advancedQuery.limit"
                :currentPage.sync="advancedQuery.page"
                @currentChange="currentChange"
                @sizeChange="sizeChange"
            />
        </div>
    </div>
</template>
<script>
import ComPagination from '@/components/pagination/pagination.vue'
//审核
import examine from '@/api/OutsourcingartyAdmin/subcontractorAdmin/examine.js'
import { advanceSearch } from '@/utils/common.js'
export default {
    components: {
        ComPagination
    },
    data () {
        return {
            dialogVisibleSearch: false,
            searchIpt: '',
            input1: '',
            value1: '',
            value2: '',
            tableData: [],
            MouseEnterId: 0,
            totalCount: 0, //总页数
            advancedQuery: {
                contractName: '', //合同名称
                creditcode: '', //统一社会信用代码
                endDate: '', //结束时间
                keyword: '', //模糊查询关键字
                limit: 20,
                orgId: '', //单据机构
                outerName: '', //分包商名称
                outerTypes: [], //外包方类型
                page: 1,
                quarter: [], //	评价季度
                startDate: '', //开始时间
                states: [] //单据状态
            }
        }
    },
    created () {
        this.getData()
    },
    computed: {
        // 判断状态
        statusLable () {
            return param => {
                const state = this.$store.state.outsourcer.equipData.state
                const obj = state.find(x => x.value == param)
                if (obj !== undefined) {
                    return obj.label
                }
            }
        }
    },
    methods: {
        cellMouseEnter (row) {
            this.MouseEnterId = row.id
        },
        cellMouseLeave () {
            this.MouseEnterId = 0
        },

        //查询分包商列表数据
        getData () {
            this.$Ajax
                .httpPost({
                    url: '/outer/year/evaluate/listByEntity',
                    params: this.advancedQuery
                })
                .then(res => {
                    this.totalCount = res.totalCount
                    this.tableData = res.list
                })
        },
        //新增按钮
        buttonAdd () {
            this.$router.push('/dynamicEvaluateAdd')
        },
        //查看
        Examine (row) {
            //点击进入查看页面
            const billid = row.id
            if (row.state === -1 || row.state === 2 || row.state === 5) {
                this.$router.push({
                    path: '/dynamicEvaluateExamine',
                    query: { billid }
                })
            } else {
                // 根据按钮状态来判断点击编辑进什么页面
                examine
                    .getCurrentUnitInfo({
                        billId: billid,
                        billType: 6110,
                        freeNextUnitIndex: 0,
                        freeNextUser: '',
                        isPass: true,
                        isShareInAudit: true,
                        opinion: ''
                    })
                    .then(res => {
                        this.auditState = res
                        if (this.auditState.canModify) {
                            this.$router.push({
                                path: '/dynamicEvaluateEdit',
                                query: { billid }
                            })
                        } else {
                            this.$router.push({
                                path: '/dynamicEvaluateExamine',
                                query: { billid }
                            })
                        }
                    })
            }
        },
        handleSelectionChange (val) {
            this.multipleSelection = val
        },
        //翻页
        currentChange () {
            this.getData()
        },
        //改变条数
        sizeChange () {
            this.getData()
        },
        //高级查询
        onAdvanceSearch () {
            advanceSearch('/quarterEvaluateSearch?type=2').then(res => {
                this.advancedQuery.outerTypes = res.subcontractorTypeKey //分包商id
                this.advancedQuery.states = res.stateTypeKey //状态
                this.advancedQuery.quarter = res.quarter //评价季度
                this.advancedQuery.outerName = res.outerName //分包商名称
                this.advancedQuery.manageOrg = res.manageOrg //管理单位
                this.advancedQuery.contractName = res.contractName //合同名称
                this.advancedQuery.creditcode = res.creditcode //统一社会信用代码
                this.advancedQuery.startDate = res.startDate //开始时间
                this.advancedQuery.endDate = res.endDate //结束时间
                this.getData()
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.page {
    width: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding-left: 20px;
    padding-right: 20px;
    background-color: rgb(239, 242, 246);
    border: 1px solid #ccc;
    border-radius: 5px;
    .top {
        height: 50px;
        display: flex;
        background-color: #fff;
        justify-content: space-between;
        .left {
            flex: 1;
            ::v-deep.el-button--mini {
                margin-top: 10px;
                margin-left: 5px;
                color: #fff;
                background-color: rgb(122, 168, 24);
            }
        }
        .right {
            display: flex;
            width: 300px;
        }
    }
    .list {
        flex: 1;
        margin-top: 10px;
        #iconEdit:hover {
            color: red;
        }
    }
    .bottom {
        height: 50px;
        padding-bottom: 20px;
    }

    ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
        width: 6px; // 横向滚动条
        height: 10px; // 纵向滚动条
    }
    // 滚动条的滑块
    ::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
        background-color: #ddd;
        border-radius: 5px;
    }
}
</style>
